<template>
  <el-dialog
          title="修改头像"
          :visible.sync="visible"
          width="800"
          :before-close="handleClose">
    <el-row>
      <el-col :span="12" style="height: 300px;">
        <vue-cropper
                ref="cropper"
                :img="options.img"
                :info="true"
                :autoCrop="options.autoCrop"
                :autoCropWidth="options.autoCropWidth"
                :autoCropHeight="options.autoCropHeight"
                :fixedBox="options.fixedBox"
                @realTime="realTime"
        >
        </vue-cropper>
        <div class="btnS">
          <el-upload
                  ref="uploadCropper"
                  :before-upload="beforeAvatarUpload"
                  :show-file-list="false"
                  action="/"
                  style="margin-right: 10px;"
          >
            <el-button type="primary" size="small">上传头像</el-button>
          </el-upload>
          <el-tooltip class="item" effect="dark" content="向左旋转" placement="top">
            <el-button size="small" @click="rotateLeft"><i class="el-icon-refresh-left"></i></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="向右旋转" placement="top">
            <el-button size="small" @click="rotateRight"><i class="el-icon-refresh-right"></i></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="放大" placement="top">
            <el-button size="small" @click="changeScale(1)"><i class="el-icon-plus"></i></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="缩小" placement="top">
            <el-button size="small" @click="changeScale(-1)"><i class="el-icon-minus"></i></el-button>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="12" style="height: 300px;">
        <div class="upload-preview">
          <img :src="previews.url" :style="previews.img" v-show="previews.url"/>
        </div>
      </el-col>

    </el-row>
    <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitUpdate" size="small">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>
  import {VueCropper} from 'vue-cropper'
  import {editAdmin, uploadBase64} from '../../api/api'
  import {BASE_URL} from "../../settings"

  export default {
    name: 'updateAvatar1',
    components: {
      VueCropper
    },
    methods: {
      show() {
        this.options.img = BASE_URL + this.$store.state.userInfo.avatarUrl
        this.visible = true
      },
      // 实时预览函数
      realTime(data) {
        this.previews = data
      },
      beforeAvatarUpload(file) {
        // 此处的上传file有多种处理方式
        let type = file.type.split('/')[1];
        if (this.uploadAccept.indexOf(type) > -1) {
          // 上传允许的类型之内
          const reader = new FileReader()
          // 把Array Buffer转化为blob 如果是base64不需要
          // 转化为base64
          reader.readAsDataURL(file)
          reader.onload = () => {
            this.options.img = reader.result
          }
        } else {
          this.$message.warning("您上传的图片格式不符，请重新上传")
        }
      },
      changeScale(num) {
        this.$refs.cropper.changeScale(num)
      },
      rotateLeft() {
        this.$refs.cropper.rotateLeft()
      },
      rotateRight() {
        this.$refs.cropper.rotateRight()
      },
      submitUpdate() {
        this.loading = true
        this.$refs.cropper.getCropData((base64) => {
          this.uploadImg(base64)
        })
      },
      async uploadImg(file) {
        let data = new FormData()
        data.append('file', file)
        data.append('filename', this.$store.state.userInfo._id)
        const res1 = await uploadBase64(data)
        this.$store.state.userInfo.avatarUrl = res1.data.url
        await editAdmin(this.$store.state.userInfo)
        this.$message.success(res1.msg)
        this.$router.go(0)
        this.loading = false
        this.visible = false
      },
      handleClose() {
        this.visible = false
      }
    },
    data() {
      return {
        visible: false,
        options: {
          img: '', //裁剪图片的地址
          info: true, //裁剪框的大小信息
          outputSize: 0.8, // 裁剪生成图片的质量
          outputType: '', // 裁剪生成图片的格式
          canScale: false, // 图片是否允许滚轮缩放
          autoCrop: true, //是否默认生成截图框
          autoCropWidth: 200, //默认生成截图框宽度
          autoCropHeight: 200,
          fixedBox: true, // 固定截图框大小 是否允许改变
          fixed: true, //是否开启截图框宽高固定比例
          fixedNumber: [1, 1], //截图框的宽高比例
          original: false, // 上传图片按照原始比例渲染
          centerBox: false, // 截图框是否被限制在图片里面
          infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        },
        previews: {},
        loading: false,
        fileList: [],
        uploadAccept: ['jpeg', 'jpg', 'png']
      }
    },
  }
</script>

<style lang="scss" scoped>
  /deep/ {
    .el-dialog {
      width: 840px;
    }

    .el-dialog__body {
      width: 800px;
    }

    .el-dialog__header {
      border-bottom: 1px solid #eaeaea;
    }
  }

  .btnS {
    display: flex;
    padding-top: 20px;

    .i {
      position: relative;
      font-size: 12px;
    }
  }

  .upload-preview {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 0 0 4px #eaeaea;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }
</style>